import React, { Component } from 'react'

export default class ToDo extends Component {
    state = {
        val: "",
        list: []
    }
    addItem = () => {
        const { val } = this.state
        let list = JSON.parse(JSON.stringify(this.state.list))
        list.push({
            val,
            check: false
        })
        this.setState({ list, val: "" })
    }
    // 删除
    del = (index) => {
        let list = JSON.parse(JSON.stringify(this.state.list))
        list.splice(index, 1)
        this.setState({
            list
        })
    }
    render() {
        const { val, list } = this.state
        return (
            <div>
                <header>
                    <input value={val}
                        //    按下回车
                        onKeyUp={(ev) => {
                            if (ev.keyCode === 13) {
                                this.addItem()
                            }
                        }}
                        onChange={(ev) => {
                            this.setState({
                                val: ev.target.value
                            })
                        }}
                        className='ipt'
                        type="text" />
                </header>

                <div>
                    <h3>
                        正在进行 ---
                        {
                           list.filter(item => item.check === false).length 
                        }
                    </h3>
                    <ul>
                        {
                            list.map((item, index) => {
                                return <li className={ item.check === false? 'block': 'none' } key={index}>
                                    <input checked={item.check}
                                        onChange={() => {
                                            let list = JSON.parse(JSON.stringify(this.state.list))
                                            list[index].check = !list[index].check
                                            this.setState({
                                                list
                                            })
                                        }}
                                        type="checkbox" />
                                    {item.val}
                                    --
                                    <button onClick={() => {
                                        this.del(index)
                                    }}>删除</button>
                                </li>
                            })
                        }
                    </ul>
                </div>


                <div>
                    <h3>
                        已经完成 ---
                        {
                           list.filter(item => item.check === true).length 
                        }
                    </h3>
                    <ul>
                        {
                            list.map((item, index) => {
                                return <li className={ item.check === true? 'block': 'none' } key={index}>
                                    <input checked={item.check}
                                        onChange={() => {
                                            let list = JSON.parse(JSON.stringify(this.state.list))
                                            list[index].check = !list[index].check
                                            this.setState({
                                                list
                                            })
                                        }}
                                        type="checkbox" />
                                    {item.val}
                                    --
                                    <button onClick={() => {
                                        this.del(index)
                                    }}>删除</button>
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
